<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery treeTable Plugin Documentation</title>
  <link href="css/master.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery.js"></script>

  <!-- BEGIN Plugin Code -->
  
  <link href="css/jquery.treeTable.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery.treeTable.js"></script>
  <script type="text/javascript">
  
  $(document).ready(function() {
    $("#dnd-example").treeTable();
    

    // Make visible that a row is clicked
    $("table#dnd-example tbody tr").live('mousedown',function() {
      $("tr.selected").removeClass("selected"); // Deselect currently selected rows
      $(this).addClass("selected");
    });
/*
    // Make sure row is selected when span is clicked
    $("table#dnd-example tbody tr span").mousedown(function() {
      $($(this).parents("tr")[0]).trigger("mousedown");
    });
    */
     $('#node1').dblclick(function(){
  		$('#node1-1').after("<tr id='node1-2' class='child-of-node1'><td style='padding-left: 38px;'><span class='file'>new.add</span></td><td>File</td><td>124.46 KB</td></tr>");
 	 });
  });
  </script>

  <!-- END Plugin Code -->
</head>
<body>
	<input type="button" id="add" value="Add" />
<table id="dnd-example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Kind</th>
      <th>Size</th>
    </tr>
  </thead>
  <tbody>
 	<tr id='node1' class='parent '><td><span class='folder'>Acknowledgements.rtf</span></td><td>File</td><td>480.95 KB</td></tr>
 	<tr id='node1-1' class='child-of-node1'><td><span class='file'>Acknowledgements.rtf</span></td><td>File</td><td>480.95 KB</td></tr>
 	<tr id='node3' class=''><td><span class='folder'>Acknowledgements.rtf</span></td><td>File</td><td>480.95 KB</td></tr>
	<tr id='node2' class='parent '><td><span class='folder'>CHUD</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-1' class='parent child-of-node2'><td><span class='folder'>amber</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-1-1' class='child-of-node2-1'><td><span class='file'>AmberTraceFormats.pdf</span></td><td>File</td><td>124.46 KB</td></tr>
	<tr id='node2-2' class='parent child-of-node2'><td><span class='folder'>BigTop</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-2-1' class='child-of-node2-2'><td><span class='file'>BigTopUserGuide.pdf</span></td><td>File</td><td>1314.71 KB</td></tr>
	<tr id='node2-3' class='parent child-of-node2'><td><span class='folder'>Saturn</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-3-1' class='child-of-node2-3'><td><span class='file'>SaturnUserGuide.pdf</span></td><td>File</td><td>694.29 KB</td></tr>
	<tr id='node2-4' class='parent child-of-node2'><td><span class='folder'>Shark</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-4-1' class='child-of-node2-4'><td><span class='file'>SharkUserGuide.pdf</span></td><td>File</td><td>12902.51 KB</td></tr>
	<tr id='node2-5' class='parent child-of-node2'><td><span class='folder'>simg4</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-6' class='parent child-of-node2'><td><span class='folder'>simg4_plus</span></td><td>Folder</td><td></td></tr>
	<tr id='node2-7' class='parent child-of-node2'><td><span class='folder'>simg5</span></td><td>Folder</td><td></td></tr>
  </tbody>
</table>

</body>
</html>